import React from "react"
import styles from '@/assets/css/email.module.css'

export default () => {

    const [form] = React.UI.Form.useForm()

    // 初始化表单数据
    let [business] = useState(React.business)

    let [second, SetSecond] = useState(60)
    let [isCounting, SetIsCounting] = useState(false)  // 倒计时是否开始
    let [send, SetSend] = useState(false)

    let timer = useRef<NodeJS.Timeout | null>(null)

    // 组件卸载触发
    useEffect(() => {
        return () => {
            if(timer.current) clearInterval(timer.current)

            timer.current = null
        }
    }, [])

    const CodeBtn = () => {
        if(isCounting)
        {
            return (
                <>
                    <React.UI.Button size='small' disabled fill='outline'>{second}秒后重新获取</React.UI.Button>
                </>
            )
        } else
        {
            return (
                <React.UI.Button size='small' color='primary' fill='outline' onClick={GetCode}>{send ? '重新获取' : '获取验证码'}</React.UI.Button>
            )
        }
    }

    // 获取验证码
    const GetCode = async () => {
        SetSend(true)
        // 开启倒计时
        startCountdown()

        let params = {
            id: React.business.id,
            action: 'send'
        }
        let result = await React.request.post('/business/UserEmail', params)

        if(result.code == 0)
        {
            React.toast(result.msg, 'fail')
            return false
        }

        React.toast(result.msg, 'success')
    }

    // 开启倒计时
    const startCountdown = () => {
        SetIsCounting(true)

        timer.current = setInterval(() => {
            SetSecond(second => {
                if(second <= 1)
                {
                    // 重置定时器
                    if(timer.current) clearInterval(timer.current)
                    SetIsCounting(false)
                    return 60
                }

                return second - 1
            })
        }, 100)
    }

    // 提交验证
    const Submit = async (values: any) => {
        let params = {
            id: React.business.id,
            code: values.code
        }
        let result = await React.request.post('/business/UserEmail', params)

        if(result.code == 0)
        {
            React.toast(result.msg, 'fail')
            return false
        }

        // 覆盖一下数据
        React.cookies.save('business', result.data, {path: '/'})
        React.business = result.data
        React.toast(result.msg, 'success', '/business')
    }

    // 返回上一页
    const back = () => {
        React.navigate(-1)

        if(timer.current)
        {
            clearInterval(timer.current)
            SetIsCounting(false)
        }
    }

    return (
        <>
            <div className={styles.header}>
                <React.UI.NavBar back="返回" onBack={back}>邮箱认证</React.UI.NavBar>
            </div>

            <div className={styles.top}></div>

            <div className={styles.form}>
                <React.UI.Form
                    layout='vertical'
                    mode='card'
                    form={form}
                    initialValues={business}
                    onFinish={Submit}
                    footer={
                        <React.UI.Button block type='submit' color='primary' size='large'>提交认证</React.UI.Button>
                    }
                >
                    <React.UI.Form.Item
                        name='email'
                        label='邮箱'
                        rules={[{required: true, message: '请输入邮箱'}]}
                    >
                        <React.UI.Input value={React.business.email} readOnly />
                    </React.UI.Form.Item>

                    <React.UI.Form.Item
                        name='code'
                        label='验证码'
                        rules={[{required: true, message: '请输入验证码'}]}
                    >
                        <div className={styles.code}>
                            <React.UI.Input className={styles.codeInput} placeholder='请输入验证码' />
                            <CodeBtn />
                        </div>
                    </React.UI.Form.Item>
                </React.UI.Form>
            </div>
        </>
    )
}